<template>
  <div class="pieChart">
    <!--  饼图  -->
    <div id="pieChart" ref="pieChart" />
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import picker from '@/components/Search/picker'

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
])
export default {
  mixins: [picker],
  props: {
    supplierList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      legendData: [], // 右侧数据 [供应商]
      seriesData: [] // 饼图数据
    }
  },
  watch: {
    supplierList(val) {
      val.forEach(item => {
        this.legendData.push(item.supplierName)
        this.seriesData.push({ value: item.latOrderQty, name: item.supplierName })
      })
      this.drawLine()
    }
  },
  methods: {
    // 模板
    drawLine() {
      const _this = this
      // // 基于准备好的dom，初始化echarts实例
      const pieChart = echarts.init(document.getElementById('pieChart'))
      // 绘制图表
      pieChart.setOption({
        title: {
          text: this.$t('market.lateDeliverySupp'), // '季度严重迟交供应商',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          data: _this.legendData,
          type: 'scroll',
          orient: 'vertical',
          bottom: 0,
          height: '80'
        },
        series: [
          {
            type: 'pie',
            radius: '60%',
            center: ['50%', '45%'],
            data: _this.seriesData,
            label: {
              show: false
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss">
.pieChart {
  width: 100%;
  text-align: right;
  #pieChart {
    width: 100%;
    height: 420px;
  }
  .posRight {
    margin-right: 20px;
    font-size: 14px;
  }
}
</style>
